<template>
    <div>
        <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd">
        </el-date-picker>
      <el-button icon="el-icon-search" circle @click="findAllAnnouncement(1)"></el-button>
      <el-button type="primary" @click="addFlag()">新增系统公告</el-button>
      <el-button @click="exportExcel()">导出</el-button>
      <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            label="消息标题"
            prop="title"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            label="消息内容"
            prop="content"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            label="发布人"
            prop="userId"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            label="状态"
            prop="status"
            show-overflow-tooltip>
          <template slot-scope="scope">
            {{scope.row.status===0?'待发布':'已发布'}}
          </template>
        </el-table-column>
        <el-table-column
            label="操作时间"
            prop="operationTime"
            width="180">
        </el-table-column>
        <el-table-column
            label="操作">
          <template slot-scope="scope">
            <el-link type="primary" @click="updateFlag(scope.row.id)">编辑</el-link>
            {{    }}
            <el-link type="danger" @click="confirmRemove(scope.row.id)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          :current-page="pageInfo.current"
          :page-sizes="[2, 5, 15, 20]"
          :page-size="pageInfo.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.total"
          @size-change="handleSizeChange"
          @current-change="findAllAnnouncement"
      />
    </div>
</template>

    <script>
    import axios from 'axios';
        export default {
            data() {
                return {
                  announcementDto: {},
                  tableData: [],
                  pageInfo: {},
                  dateRange: null,
                  ids: []
                }
            },
            methods:{
              confirmRemove(id) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  this.removeAnnouncement(id);
                }).catch(() => {
                  this.$message({
                    type: 'info',
                    message: '已取消删除'
                  });
                });
              },
              removeAnnouncement(id) {
                axios.delete(`http://localhost:8088/announcement/remove/${id}`).then(res => {
                  this.$message({
                    type: 'success',
                    message: '删除成功!'
                  });
                  this.findAllAnnouncement(1);
                }).catch(error => {
                  this.$message({
                    type: 'error',
                    message: '删除失败，请稍后再试!'
                  });
                  console.error(error);
                });
              },
              updateFlag(id){
                this.$router.push({path: '/xitong/gonggao/update', query: {id: id}})
              },
              addFlag(){
                this.$router.push({path:'/xitong/gonggao/addAndDelete'})
              },
              exportExcel(){
                if (this.ids.length==0){
                  this.$message.error("请选择要导出的数据")
                }else {
                  axios.get(`http://localhost:8088/announcement/exportExcel?ids=${this.ids}`).then(res=>{
                    this.findAllAnnouncement(1)
                  })
                }
              },
              handleSizeChange(pageSize){
                this.announcementDto.pageSize=pageSize
                this.findAllAnnouncement(1)
              },
              findAllAnnouncement(pageNum){
                if (this.dateRange!=null && this.dateRange.length>0){
                  this.announcementDto.startTime=this.dateRange[0]
                  this.announcementDto.endTime=this.dateRange[1]
                }
                this.announcementDto.pageNum=pageNum;
                  axios.post("http://localhost:8088/announcement/findAllAnnouncement",this.announcementDto).then(res=>{
                    this.tableData=res.data.data.records;
                    this.pageInfo=res.data.data;
                    this.announcementDto.startTime=null
                    this.announcementDto.endTime=null
                  })
              },
              handleSelectionChange(val) {
                this.ids=val.map(row => row.id);
              }
            },
            created() {
                this.findAllAnnouncement(1)
            }
        }
</script>

<style scoped>

</style>